import React from 'react';
import rotateIcon from './rotate.svg';
import './App.css';


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLandscape: true,
      time: '',
      date: '',
    }
  }
  fetchTime() {
    const date = new Date();
    return (date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()) + ':' +
      (date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes());
  }

  fetchDate() {
    const date = new Date();
    return date.getFullYear() + '/'
      + (date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
      + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
  }

  switchScreenOrientation() {
    const that = this;
    that.setState({
      isLandscape: !that.state.isLandscape
    })
  }

  componentDidMount() {
    const that = this;
    setInterval(() => { that.setState({ time: that.fetchTime(), date: that.fetchDate() }) }, 1000);
    this.switchScreenOrientation();
    
  }

  render() {
    return (
      <div className="App">
        <div className="LandscapeContainer">
          <div className="Time"
            style={{ transform: this.state.isLandscape ? [`rotate(90deg) translate3d(80px, -240px, 10px)`] : [`translate3d(10px, -40px, 0px)`] }}>
            {this.state.time}
          </div>
          <div className="Date"
            style={{ transform: this.state.isLandscape ? [`rotate(90deg) translate3d(-140px, -100px, 90px)`] : [`translate3d(-60px, -80px, 0px)`] }}>
            {this.state.date}
          </div>
          <div className="switchContainer"
            style={{ transform: this.state.isLandscape ? [`translate3d(95px, -30px, 0px)`] : [`translate3d(100px, -122px, 0px)`] }}>
            <img src={rotateIcon} className="rotateImg" onClick={()=>this.switchScreenOrientation()} />
          </div>
        </div>
      </div>
    );
  }

}

export default App;
